import { DrawerForm } from '@ant-design/pro-form';
import { Alert, Button } from 'antd';
import FormItem from 'antd/es/form/FormItem';
import 'dayjs/locale/zh-cn';

import { ProFormTextArea } from '@ant-design/pro-components';
import React from 'react';
import { useAccess } from 'umi';
import UploadDragger from '../components/UploadDragger';

interface AddAttachmentProps {
  onRefurbish: (attachment: AssessWeekAttachmentBo.AttachmentSave) => void;
}

const AddAttachment: React.FC<AddAttachmentProps> = ({ onRefurbish }) => {
  const access = useAccess();

  return (
    <DrawerForm
      key="add_assess_record_attachment_drawer_form"
      title={
        <div
          style={{
            display: 'flex',
          }}
        >
          添加 - 佐证材料
        </div>
      }
      drawerProps={{
        width: 600,
        maskClosable: false,
        destroyOnClose: true,
      }}
      trigger={<Button>佐证材料</Button>}
      onOpenChange={(visible: boolean) => {}}
      initialValues={{
        isDemandClipboard: 1,
      }}
      onFinish={async (values) => {
        if (values.attachments !== undefined) {
          const attachmentFilters = values.attachments.filter((item) => item.status === 'done');

          const attachments = attachmentFilters.map((item) => {
            const data = item.response.data;

            return {
              id: data.id,
              name: item.name,
              thumbUrl: item.thumbUrl,
              mimeType: data.mimeType,
            };
          });

          onRefurbish({ link: values.link, remarks: values.remarks, attachments: attachments });
        }
        return true;
      }}
    >
      <Alert
        message="为保证记录被正确采纳，请尽量填写相关信息，包括截图、链接、备注"
        type="warning"
        showIcon
        style={{
          marginBottom: 24,
        }}
      />
      <FormItem name="attachments" label="附件" hidden={!access.文化报表x创建x附件}>
        <UploadDragger
          onPreview={(file) => {}}
          access={{
            isPicture: access.文化报表x创建x附件x图片,
            isVideo: access.文化报表x创建x附件x视频,
            isOffice: access.文化报表x创建x附件x办公,
            isOther: access.文化报表x创建x附件x其他,
          }}
          url="/assess/culture/attachment/save"
          maxCount={2}
        />
      </FormItem>

      <ProFormTextArea
        width="xl"
        name="link"
        label="链接"
        fieldProps={{
          allowClear: true,
          rows: 3,
          maxLength: 5000,
        }}
      />
      <ProFormTextArea
        width="xl"
        name="remarks"
        label="备注"
        fieldProps={{
          allowClear: true,
          rows: 7,
          maxLength: 5000,
        }}
      />
    </DrawerForm>
  );
};
export default AddAttachment;
